.float-container {
    background-color: rgb(198, 207, 255);
    /* 消除浮动的影响：1、给高度 */
    /* height: 100px; */
}


/* 强调css格式、选择器命名 */

.div-init div {
    margin: 10px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}

.float {
    float: left;
}

.left div {
    float: left;
    background-color: rgb(216, 186, 250);
}

.right div {
    float: right;
    background-color: rgb(193, 255, 240);
}


/* 为什么父盒子宽度减小时，右浮动的盒子先换行？ */


/* 考一下选择器优先级 */


/* 为什么渲染不成功 */

.high {
    height: 100px;
}

#high {
    height: 100px;
}

#high1 {
    height: 100px;
}

#high2 {
    height: 120px;
}


/* 浮动的影响：高度塌缩 */

.next-div {
    width: 100%;
    height: 100px;
    background-color: rgb(255, 190, 190);
    /* 消除浮动的影响：2、在受影响属性上添加clear属性 */
    /* clear: both; */
    /* margin如果小于浮动元素的高度，效果失效 */
    margin-top: 110px;
}


/* 清除浮动的方法 */


/* 消除浮动的影响：3、在父盒子之间添加含clear属性的父盒子 */


/* 消除浮动的影响：4、在父盒子内，浮动元素的随后添加含clear属性的子盒子 */

.clear {
    display: block;
    clear: both;
    /* margin如果小于浮动元素的高度，效果失效 */
    margin-top: 110px;
}


/* 5、overflow:hidden */

.overflow {
    overflow: hidden;
}


/* 注意：一浮全浮 */

.float-all div {
    background-color: rgb(216, 186, 250);
}

.float-it {
    float: left;
}

#after-float {
    background-color: rgb(186, 219, 250);
}